<template>
    <div>
        <!-- 技术解释区域 -->
        <div style="background-color: #e3f2fd; padding: 15px; margin-bottom: 20px; border-radius: 8px; border-left: 4px solid #2196F3;">
            <h3 style="color: #1976D2; margin-top: 0;">🎨 技术解释：Class 绑定</h3>
            <p><strong>对象语法：</strong>使用 <code>:class="{'className': condition}"</code> 根据条件动态添加或移除CSS类。</p>
            <p><strong>数组语法：</strong>使用 <code>:class="[class1, class2]"</code> 可以应用多个类，支持变量和字符串混合。</p>
            <p><strong>计算属性：</strong>当类的逻辑复杂时，使用计算属性返回类对象，保持模板简洁且具有缓存优势。</p>
            <p><strong>响应式更新：</strong>当绑定的数据发生变化时，Vue会自动更新DOM中的class属性。</p>
        </div>

        <!-- 交互演示区域 -->
        <div style="background-color: #f5f5f5; padding: 20px; border-radius: 8px; margin-bottom: 20px;">
            <h3>Class 绑定演示</h3>
            
            <!-- 控制按钮 -->
            <div style="margin-bottom: 20px;">
                <button @click="toggleRed" style="margin-right: 10px; padding: 8px 16px; background-color: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    切换红色 (当前: {{ isRed ? '开启' : '关闭' }})
                </button>
                <button @click="toggleBold" style="margin-right: 10px; padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    切换粗体 (当前: {{ isBold ? '开启' : '关闭' }})
                </button>
                <button @click="changeColorClass" style="padding: 8px 16px; background-color: #FF9800; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    切换颜色类 (当前: {{ colorClass }})
                </button>
            </div>

            <!-- 示例展示 -->
            <div style="border: 1px solid #ddd; padding: 15px; border-radius: 4px; background-color: white;">
                <div style="margin-bottom: 10px;">
                    <strong>1. 对象语法：</strong>
                    <div :class="{'red':isRed, 'bold':isBold}" style="margin-top: 5px;">
                        红色还是黑色 (对象语法控制)
                    </div>
                </div>
                
                <div style="margin-bottom: 10px;">
                    <strong>2. 数组语法：</strong>
                    <div :class="[colorClass,'bold']" style="margin-top: 5px;">
                        数组，红色还是黑色 (数组语法控制)
                    </div>
                </div>
                
                <div>
                    <strong>3. 计算属性：</strong>
                    <div :class="computedClasses" style="margin-top: 5px;">
                        计算属性。红色还是黑色 (计算属性控制)
                    </div>
                </div>
            </div>

            <!-- 当前状态显示 -->
            <div style="margin-top: 15px; padding: 10px; background-color: #e8f5e8; border-radius: 4px;">
                <strong>当前状态：</strong>
                <p>isRed: {{ isRed }} | isBold: {{ isBold }} | colorClass: "{{ colorClass }}"</p>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    computed:{
        computedClasses(){
            return {
                'red': this.isRed,
                'bold':this.isBold
            };
        }
    },
    data() {
        return {
            isRed: true,
            isBold : false,
            colorClass : "red"
        };
    },
    methods: {
        toggleRed() {
            this.isRed = !this.isRed;
        },
        toggleBold() {
            this.isBold = !this.isBold;
        },
        changeColorClass() {
            this.colorClass = this.colorClass === 'red' ? 'blue' : 'red';
        }
    }
}
</script>
<style>
.red{
    color: rgb(255, 0, 0);
}
.blue{
    color: rgb(0, 0, 255);
}
.bold{
    font-weight: bold;
}
</style>